<template>
  <div class="pinModify">
    <!--修改PIN-->
    <div class="pinMain" @keyup.13="eventshow($event)">
      <ul>

        <li>
          <label>{{lang['Current Asset Password']}}</label>
          <input type="password" name="" maxlength="6" value="" v-model="oldpassword" ref="oldpassword" :placeholder="lang['please Asset original password']">
        </li>

        <li>
          <label>{{lang['new capital cipher']}}</label>
          <input type="password" maxlength="6" :placeholder="lang['pleaseEnterNewsAFundPassword']" v-model="password" ref="password" @input="changePassword">
        </li>

         <li>
          <label>{{lang['confirmation PIN code']}}</label>
          <input type="password" maxlength="6" name="" value="" v-model="password2" ref="password2" :placeholder="lang['register_PleaseconfirmPassword PIN password']">
        </li>

        <li>
          <label v-if="AreaCodeData !== '' ">{{lang['smsAuthenticationCode']}}</label>
          <label v-if="AreaCodeData === '' ">{{lang['mailboxVerificationCode']}}</label>
          <input type="text" name="" value="" maxlength="6" class="inptYz"  v-model="verifyCode" ref="verifyCode"
          :placeholder="lang['register_PleaseerificationCode']">
          <a class="countryAreaNo">
            <span v-if="sendMsgDisabled" style="color:rgba(255,255,255,.7);">{{lang['register_ClickGett']}}({{time}})</span>
            <span v-if="!sendMsgDisabled" v-bind:class="{colorActive: !isSendSMS}"  @click="sendphone">{{lang['register_ClickGet']}}</span>
          </a>
        </li>

        <li>
          <a class="forgetBth" @click="forgetBth" v-html="lang['forget fund password']"></a>
        </li>

        <li>
          <button type="button" class="submitBtn" v-bind:class="{ active: !isSubmitBtnCheck}"  @click="submitPin"> {{lang['determineBth']}} </button>
        </li>
      </ul>
    </div>

    <!-- 弹窗 提示-->
    <SwModal :isShow.sync="showModal" modalClass="userModal smallModal" :isShowBg="true" :isCloseOnClickBg="true" :onClosed="onClosed" :okText="lang['determineBth']" :ok="pinDetermine">
      <div class="successfulOperation">
        <p>{{lang['fund password modified successfully']}}</p>
      </div>
    </SwModal>
    <!-- 弹窗 提示-->
  </div>
</template>
<script>
import SwModal from '@/components/SwModal'
import ModalApi from '@/components/SwModal/api.js'
import EventBus from '@/service/EventBus.js'
import CheckInput from '@/utils/CheckInput.js'
import rules from '@/utils/rules.js'

export default {
  props: [
    'lang',
    'langKey',
    'getCustomer'
  ],
  data () {
    return {
      showModal: false,
      time: 60,
      sendMsgDisabled: false,
      password: '',
      phone_emali: '',
      password2: '',
      oldpassword: '',
      verifyCode: '',
      AreaCodeData: '',
      sendCodeulr: '',
      isSendSMS: true,
      isSubmitBtnCheck: true
    }
  },
  components: {
    SwModal
  },
  methods: {
    changePassword () {
      let phoneInput = this.$refs.password
      let value = phoneInput.value
      let password = value.replace(/\D/g, '')
      phoneInput.value = password
      this.password = password
    },
    // 发送验证码
    sendphone () {
      if (!this.isSendSMS) { return }
      // 原密码、新密码、确认密码、是否为空
      this.checkHandle.chackByIdsInOrder(['oldpassword', 'password', 'password2'])
      .then((info) => {
        if (!info.isValid) {
          // info.error()
          ModalApi.message(info.error(), '', '', 'userModal')
          return
        }
        this.isSendSMS = false
        if (this.AreaCodeData) {
          this.sendCodeulr = 'Security/SendSmsByCode'
        } else {
          this.sendCodeulr = 'Security/SendMailByCode'
        }
        this.$http.post(this.sendCodeulr, {
          AreaCode: this.AreaCodeData,
          VerifyDeviceType: 0,
          VerifyCode: '',
          PhoneOrEmail: this.phone_emali,
          BussinessType: 1,
          LanguageCode: this.langKey
        }, {
          modalOptions: {
            modalClass: 'userModal'
          }
        })
        .then((res) => {
          if (res.StatusCode === '200') {
            // 倒计时
            let me = this
            me.sendMsgDisabled = true
            let interval = window.setInterval(() => {
              if ((me.time--) <= 0) {
                me.time = 60
                me.sendMsgDisabled = false
                window.clearInterval(interval)
              }
            }, 1000)
            // 倒计时
            ModalApi.message(this.lang['VerificationCodeSuccessful'], '', '', 'userModal')
          }
          this.isSendSMS = true
        })
      })
      .catch((info) => {
      })
    },
    eventshow (ev) {
      if (ev.keyCode === 13) {
        this.submitPin()
      }
    },
    submitPin () {
      if (!this.isSubmitBtnCheck) { return }

      // 原密密码、新密码、确认密码、验证码是否为空
      this.checkHandle.chackByIdsInOrder(['oldpassword', 'password', 'password2', 'verifyCode'])
      .then((info) => {
        if (!info.isValid) {
          // info.error()
          ModalApi.message(info.error(), '', '', 'userModal')
          return
        }
        this.isSubmitBtnCheck = false
        this.$http.post('Security/ModifyeSafePwd', {
          oldPwd: this.oldpassword,
          newPwd: this.password,
          pin: this.verifyCode
        }, {
          modalOptions: {
            modalClass: 'userModal'
          }
        })
        .then((res) => {
          if (res.StatusCode === '200') {
            this.oldpassword = ''
            this.password = ''
            this.password2 = ''
            this.verifyCode = ''
            this.sendMsgDisabled = false
            this.showModal = !this.showModal
          }
          this.isSubmitBtnCheck = true
        })
      })
      .catch((info) => {
      })
    },
    pinDetermine () {
      this.showModal = false
      this.$emit('GetCustomerList')
    },
    onClosed () {

    },
    // 是否忘记密码
    forgetBth () {
      EventBus.$emit('isShowForgerPin', true)
    },
    getCustomerList () {
      if (this.getCustomer.Phone) {
        this.phone_emali = this.getCustomer.Phone
        this.AreaCodeData = this.getCustomer.AreaCode.substring(1)
      } else {
        this.phone_emali = this.getCustomer.Email
        this.AreaCodeData = ''
      }
    }
  },
  watch: {
    getCustomer () {
      this.getCustomerList()
    }
  },
  mounted () {
    let that = this
    this.checkHandle = new CheckInput({
      rules: rules,
      trimValue (val, item) {
        return val.replace(/^\s+|\s+$/, '')
      },
      list: [
        {
          id: 'oldpassword',
          input: that.$refs.oldpassword,
          rules: [
            {
              rule: 'required',
              error () {
                return that.lang['please Asset original password']
              }
            }
          ]
        },
        {
          id: 'password',
          input: that.$refs.password,
          rules: [
            {
              rule: 'required',
              error () {
                return that.lang['pleaseEnterNewsAFundPassword']
              }
            },
            {
              rule (val) {
                return that.password.length === 6
              },
              error () {
                return that.lang['register_passwordHint Asset']
              }
            },
            {
              rule (val) {
                return that.password !== that.oldpassword
              },
              error () {
                return that.lang['new PIN match old']
              }
            }
          ]
        },
        {
          id: 'password2',
          input: that.$refs.password2,
          rules: [
            {
              rule: 'required',
              error () {
                return that.lang['register_PleaseconfirmPassword PIN password']
              }
            },
            {
              rule (val) {
                return that.password === that.password2
              },
              error () {
                return that.lang['pin settings are inconsistent']
              }
            }
          ]
        },
        {
          id: 'verifyCode',
          input: that.$refs.verifyCode,
          rules: [
            {
              rule: 'required',
              error () {
                return that.lang['register_PleaseerificationCode']
              }
            }
          ]
        }
      ]
    })
  }
}
</script>
<style lang="less">

.pinModify{
  background: #1A1F2B ;
  padding-bottom: 20px;

  .pinMain{
    width: 420px;
    margin: 0 auto;
  }
  .pinMain  li{
    position: relative;
    clear: both;
  }
  .pinMain  li label{
    display: block;
    padding: 15px 10px 5px;
    height: 20px;
    line-height: 20px;
    color: #fff;
  }
  .pinMain  li input{
    padding: 0 10px;
    width: 100%;
    height: 40px;
    line-height: 40px;
    border-radius: 2px;
    box-sizing: border-box;
    background-color: #2A3440;
    color: #fff;
    font-size: 12px;
  }
   .pinMain li  .inptYz{
    padding-right: 120px;
  }

  .pinMain li .countryAreaNo {
    position: absolute;
    top: 40px;
    right: 0;
    width: 100px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #fff;
  }
  .pinMain  li .countryAreaNo span{
    display: block;
    font-size: 12px;
  }
   .pinMain  li .countryAreaNo span.colorActive {
      color: #ccc
   }
  .pinMain  li .countryAreaNo:after{
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    display: block;
    height: 20px;
    border-left: solid 1px #B1BBC2;
   }
  .pinMain  li .submitBtn {
    display: block;
    margin: 40px auto 0;
    width: 50%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #3782FF;
    color: #fff;
    font-size: 12px;
    border-radius: 5px;
    cursor: pointer;
  }
  .pinMain  li .submitBtn.active{
    background-color: #2A3441;
    cursor:not-allowed;
  }
  .pinMain  li .forgetBth{
    font-family: PingFang-SC-Medium;
    font-size:0.75rem;
    color: #3782FF;
    float: right;
    padding: 10px 20px 0 0;
    font {
      color: #3782FF;
    }
  }
}

</style>
